<template>
  <div class="Echarts">
    <div id="main" ref="echarts" style="width: 600px; height: 400px" />
  </div>
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
import { dataStatistics } from '@/api/chart.js'

export default {
  name: 'Echarts',
  data() {
    return {}
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await dataStatistics({})
      const myecharts = echarts.init(document.getElementById('main'))
      // 配置图表
      const option = {
        title: {
          show: true,
          text: '整体数据',
          left: 0
        },
        color: ['#f76137', '#f9b358', '#409eff'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          right: 'right'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['55%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                color: ['#f76137', '#f9b358', '#409eff']
              }
            },
            labelLine: {
              // show: false
            },
            data: res.data.data
          }
        ]
      }
      myecharts.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.Echarts {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
